<template>
  <div style="background-color: #F4F4F4">
    <div class="main-intro" @scroll="scrollEvent">
      <div class="nav_fix" v-show="scroll">
        <div class="wrap_box">
          <span>商铺编号：{{detailData.id}}</span>
          <span>月租金：{{detailData.rentPrice?detailData.rentPrice: '面议'}}元/月</span>
          <span>面积：{{detailData.shAcreage}}㎡</span>
          <span>转让费：{{(detailData.attornPrice=='null' || detailData.attornPrice==0)?'面议':detailData.attornPrice +'元'}}</span>
        </div>
        <div class="hot_fixed">
          <i class="el-icon-phone-outline"></i>
          <div>
            抢铺热线
            <br/>
            {{detailData.rePhone}}
          </div>
        </div>
      </div>
      <div class="carousel">
        <div class="basic-Img">
          <el-carousel
            @change="changeImg"
            ref="carousel"
            indicator-position="none"
            :autoplay="false"
            height="450px"
          >
            <el-carousel-item v-for="item in shPic" :key="item">
              <!-- <div style="display:flex;align-items:center;width:100%;
              height:100%;background:#ccc;">-->
              <img :src="item" alt style="width: 100%;height: 100%"/>
              <!-- </div> -->
            </el-carousel-item>
          </el-carousel>
          <div class="small-imgs">
            <div
              v-for="(item,index) in shPic"
              :key="index"
              @click="slideNum(index)"
              :class="{activeImg: activeNum === index}"
            >
              <img :src="item" alt @error="errorImage"/>
            </div>
          </div>
        </div>
        <div class="basic-intro">
          <h2>{{detailData.shName}}</h2>
          <div class="title-bottom" v-if="false">
            <span>编号：{{detailData.id}}</span>
            <div>
              <span>纠错</span>
              <span>收藏</span>
              <span>发送到手机</span>
            </div>
          </div>
          <div class="money">
            <ul class="money-ul">
              <li class="money-li" style="text-align: left">
                <p class="colorRed">{{detailData.shAcreage}}㎡</p>
                <p class="blodfor">使用面积</p>
              </li>
              <li class="money-li">
                <p class="colorRed">{{detailData.rentPrice?detailData.rentPrice: '面议'}}元/月</p>
                <p class="blodfor">租金</p>
              </li>
              <li  v-if="false">
                <p class="li-blod">
                  1.83/㎡/天
                </p>
              </li>
              <li  v-if="false">
                <p class="li-blod">
                  有压力？试试房租分期
                </p>
              </li>
            </ul>
          </div>
          <div class="label-container">
            <dl>
              <dt>
                转让费：
              </dt>
              <dd>
                <p
                  class="colorRed"
                >{{(detailData.attornPrice=='null' || detailData.attornPrice==0)?'面议':detailData.attornPrice
                  +'元'}}</p>
              </dd>
            </dl>
            <dl>
              <dt>标签：</dt>
              <dd>
                <ul>
                  <li>{{detailData.shType}}</li>
                </ul>
              </dd>
            </dl>
            <dl>
              <dt>区域：</dt>
              <dd>
                <p>{{detailData.province}}{{detailData.city}}{{detailData.arer}}</p>
              </dd>
            </dl>
            <dl>
              <dt>地址：</dt>
              <dd>
                <p>{{detailData.shAddress}}</p>
                <p v-show="false"></p>
              </dd>
            </dl>
          </div>
          <div v-if="!accountShow&&show" style="margin-top: 30px;color: #333;font-size: 18px">{{detailData.rePhone}}</div>
          <div class="shop-linker" @click="handleClick" v-else>
            点击查看联系方式
          </div>
        </div>
      </div>
      <!-- <div class="parts">
        <h2 class="partstitle">商铺描述</h2>
        <p class="intro-desc" v-html="detailData.shDescribe"></p>
      </div>-->
      <div class="body">
        <div class="body-left">
          <dl>
            <dt class="ad-title">
              <span>店铺介绍</span>
            </dt>
            <dd>
              <div>
                <img src="../../static/img/shangpu1.png"/>
                <span>{{detailData.reName}}</span>
              </div>
              <p v-html="detailData.shDescribe"></p>
            </dd>
          </dl>
          <dl>
            <dt class="ad-title">
              <span>基本信息</span>
            </dt>
            <dd>
              <ul class="base-info">
                <!--<li style="margin-bottom: 37px">
                  <label>经营状态</label>
                  <ul>
                    <li>当前经营：<span>美容美发</span></li>
                    <li>美发店证照：<span>可办照 经营状</span></li>
                    <li>经营状态： <span>营业中</span></li>
                    <li>已有证件： <span>无证件</span></li>
                  </ul>
                </li>
                <li>
                  <label>物业信息</label>
                  <ul style="margin-top: 28px">
                    <li>楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;层：<span>仅一层 </span></li>
                    <li>商铺类型：<span>独立商业</span></li>
                    <li>是否分割：<span>否</span></li>
                   &lt;!&ndash; <li>层&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：<span>-</span></li>
                    <li style="margin: 20px 0">建筑面积：<span>72㎡ </span></li>
                    <li style="margin: 20px 0">进&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深：<span>-</span></li>
                    <li style="margin: 20px 0">面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宽：<span>-</span></li>
                    <li style="margin: 20px 0">层&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：<span>80㎡</span></li>&ndash;&gt;
                    <li>产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;权：<span>30年 </span></li>
                    <li style="margin: 20px 0">朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：<span>南</span></li>
                    <li style="margin: 20px 0">是否临近主干道：<span>否</span></li>
                  </ul>
                </li>
                <li>
                  <label style="margin-top: 30px">位置信息</label>
                  <ul style="margin-top: 20px">
                    <li>区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域：<span>通州</span></li>
                    <li>环&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;线：<span>五环外</span></li>
                    <li>临近街道：<span>华兴大道</span></li>
                    <li>商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;圈：<span>驷马桥</span></li>
                    <li style="margin: 20px 0">建筑面积：<span>72㎡ </span></li>
                    <li style="margin: 20px 0">进&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深：<span>-</span></li>
                    <li style="margin: 20px 0">面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宽：<span>-</span></li>
                    <li style="margin: 20px 0">层&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;高：<span>80㎡</span></li>
                    &lt;!&ndash;<li>产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;权：<span>30年 </span></li>
                    <li>朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向：<span>南</span></li>
                    <li>是否临近主干道：<span>否</span></li>&ndash;&gt;
                  </ul>
                </li>
                <li>
                  <label style="margin-top: 30px">临铺信息</label>
                  <ul style="margin-top: 20px">
                    <li>周边最火：<span>-</span></li>
                  </ul>
                </li>
                <li>
                  <label style="margin-top: 30px">费用明细</label>
                  <ul style="margin-top: 20px">
                    <li>月&nbsp;&nbsp;租&nbsp;&nbsp;金：<span>2000元/月</span></li>
                    <li>支付方式：<span>1月一付押金</span></li>
                    <li>当前租约： <span>-</span></li>
                    <li>剩余租约： <span>-</span></li>
                    <li style="margin-top: 20px">最长可租：<span>60个月</span></li>
                    <li style="margin-top: 20px">续租方式： <span>另签一份</span></li>
                    <li style="margin-top: 20px">分时出租： <span>否</span></li>
                  </ul>
                </li>
                <li>
                  <label style="margin-top: 30px">转让相关</label>
                  <ul style="margin-top: 20px">
                    <li>转让费用：<span>面议</span></li>
                    <li>上次转让费用：<span>无空转</span></li>
                    <li>装让费： <span>无</span></li>
                    <li>转让内容： <span>设备</span></li>
                  </ul>
                </li>-->
                <li>
                  <ul>
                    <li>发布类型：<span>{{detailData.reType==='1'?'出租':'转让'}}</span></li>
                    <li>区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域：<span>{{detailData.province}}{{detailData.city}}{{detailData.arer}}</span></li>
                    <li>详细地址：<span>{{detailData.shAddress}}</span></li>
                    <li>店&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<span>{{detailData.shName}}</span></li>
                    <li style="margin: 25px 0">租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金：<span>{{detailData.rentPrice?detailData.rentPrice: '面议'}}元/月</span></li>
                    <li style="margin: 25px 0">转&nbsp;&nbsp;&nbsp;&nbsp;让费：<span>{{(detailData.attornPrice=='null' || detailData.attornPrice==0)?'面议':detailData.attornPrice +'元'}}</span></li>
                    <li style="margin: 25px 0">面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;积：<span>{{detailData.shAcreage}}㎡</span></li>
                    <li style="margin: 25px 0">商铺区况：<span></span>{{detailData.shRegionType}}</li>
                    <li>经营业态：<span>{{detailData.shType}}</span></li>
                  </ul>
                </li>
              </ul>
            </dd>
          </dl>
          <dl style="margin-top: 20px">
            <dt class="ad-title">
              <span>配套设施</span>
            </dt>
            <dd>
              <div class="parts">
                <div class="parts-set">
                  <div
                    class="part-item"
                    v-for="(item,index) in partlist"
                    :class="{activePart: partsActive[index]}"
                    :key="index"
                  >
                    <span class="iconfont" :class="'icon-icon'+(index+1)"></span>
                    <p class="icontxt">{{item.name}}</p>
                  </div>
                </div>
              </div>
            <!--  <div style="border:1px solid rgba(238,238,238,1);padding: 30px">
                <div class="bg"></div>
              </div>-->
            </dd>
          </dl>
         <!-- <div class="tu">
            <div>
              <div class="ad-title">
                <span>租金对比分析</span>
              </div>
              <echarts/>
            </div>
            <div>
              <div class="ad-title">
                <span>周边铺源</span>
              </div>
              <ul>
                <li v-for="i in 4" :key="i">
                  <p>通州马驹桥80㎡出租，无转让费</p>
                  <p>日租金<span>2.08元/㎡</span></p>
                </li>
              </ul>
            </div>
          </div>
          <dl style="overflow: hidden;margin-top: 18px">
            <dt class="ad-title">
              <span>铺源报告</span>
            </dt>
            <dd class="shangpu">
              <div>
                <div class="btn">
                  <span>查看铺源报告</span>
                  <div>20元/次</div>
                </div>
              </div>
            </dd>
          </dl>
          <div class="bottom-bg"></div>-->
        </div>
        <div v-if="false" class="body-right">
          <div class="ad-title">
            <span>店铺历程</span>
          </div>
          <div class="dongtai">
            <div>
              <ul>
                <li v-for="i in 5" :key="i">
                  <span></span>
                  <p>岳老板</p>
                </li>
              </ul>
            </div>
            <div>
              <ul>
                <li v-for="i in 5" :key="i">
                  <img src="../../static/img/licheng.png">
                  <span v-if="i!==5"></span>
                </li>
              </ul>
            </div>
            <div>
              <ul>
                <li>
                  <p>店主挂牌</p>
                  <p>2019-12-12</p>
                </li>
                <li>
                  <p>已验证</p>
                  <p>2019-12-12</p>
                </li>
                <li>
                  <p>已签约</p>
                  <p>2019-12-12</p>
                </li>
                <li>
                  <p>转让中</p>
                  <p>2019-12-12</p>
                </li>
                <li>
                  <p>运营中</p>
                  <p>2019-12-12</p>
                </li>
              </ul>

            </div>
          </div>
          <div class="my">
            <p>对租金不满意？</p>
            <p>告诉我们，告诉帮您砍价</p>
            <span><input placeholder="请输入意向价"/></span>
            <div>帮我砍价</div>
          </div>
          <img src="../../static/img/appxiaz.png" style="width: 100%;height:129px;"/>
          <div class="ad-title" style="margin-top: 30px;margin-bottom: 20px">
            <span>我们的服务</span>
          </div>
          <img src="../../static/img/fuwu.png" style="width: 100%;height:150px;"/>
          <div class="ad-title" style="margin-top: 30px;margin-bottom: 20px">
            <span>相关推荐</span>
          </div>
          <ul class="picture-text">
            <li v-for="i in 3" :key="i">
              <img src="http://www.cbe.com.cn//pic/2017111214759P1.jpg"/>
              <p>
                <span>顺义新城大街45㎡小吃店转让</span>
                <span>1.2万/月</span>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="request" v-if="false">

    </div>
  </div>
</template>

<script>
  import Echarts from "./echarts";
  export default {
    components: {Echarts},
    data() {
      return {
        activeNum: 0,
        partsActive: [
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false,
          false
        ],
        detailData: "",
        partlist: [
          {
            name: "客梯"
          },
          {
            name: "货梯"
          },
          {
            name: "中央空调"
          },
          {
            name: "停车位"
          },
          {
            name: "天然气"
          },
          {
            name: "网络"
          },
          {
            name: "暖气"
          },
          {
            name: "扶梯"
          },
          {
            name: "上水"
          },
          {
            name: "下水"
          },
          {
            name: "排烟"
          },
          {
            name: "排污"
          },
          {
            name: "管煤"
          },
          {
            name: "380v"
          },
          {
            name: "可明火"
          },
          {
            name: "外摆区"
          }
        ],
        shPic: [],
        scroll: false,
        show:false
      };
    },
    filters: {
      filterTime(time) {
        /* 切割时间去除时分秒 */
        if (time) {
          let arr = time.split(" ");
          return arr[0];
        }
      }
    },
    computed: {
      accountShow() {
        return this.$store.state.loginBtn;
      },
    },
    mounted() {
      window.addEventListener("scroll", this.scrollEvent, true);
    },
    methods: {
      scrollEvent(e) {
        if (e.target.scrollTop > 300) {
          this.scroll = true
        } else {
          this.scroll = false
        }
      },
      changeImg(e) {
        this.activeNum = e;
      },
      slideNum(index) {
        this.$refs.carousel.setActiveItem(index);
        this.activeNum = index;
      },
      shPicToArr(string) {
        let arr = string.split(",");
        if (arr[0] === "undefined" || string == "") {
          return [this.$store.state.defaultCover];
        } else {
          return arr;
        }
      },
      getDetail() {
        this.$http
          .get(this.$api.getShopsInfo(), {
            params: {
              shopsId: this.$route.params.id
            }
          })
          .then(res => {
            if (res.data.code === 0) {
              this.shPic = this.shPicToArr(res.data.shopsInfo.shPic);
              this.detailData = res.data.shopsInfo;
              this.partsToArr(res.data.shopsInfo.shParts);
            }
          });
      },
      partsToArr(string) {
        let arr = string.split(",");
        for (let i = 0; i < arr.length; i++) {
          this.partsActive.splice(arr[i] - 1, 1, true);
        }
      },
      handleClick(){
        if (this.accountShow) {
          this.$router.push('/login')
        }else {
          this.show = true
        }
      }
    },
    created() {
      this.getDetail();
    }
  };
</script>
<style scoped lang="less">
  @import "../../static/font/iconfont.css";

  .iconfont {
    font-size: 40px;
  }

  .nav_fix {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    height: 70px;
    z-index: 100;
    width: 100%;
    color: #fff;
    display: flex;
    font-size: 14px;
    justify-content: space-around;

    .hot_fixed {
      background: #ff5001;
      height: 50px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      margin-top: 10px;
      border-radius: 3px;

      i {
        font-size: 20px;
      }
    }

    .wrap_box {
      line-height: 70px;

      span {
        margin-right: 34px;
      }
    }
  }

  .activeImg {
    outline: 2px solid #ff5001;
  }

  .detail-li {
    text-align: center;
    font-size: 16px;
    margin: 0 15px;

    p {
      color: #999;
    }
  }

  .shop-linker {
    width: 436px;
    height: 70px;
    background: rgba(228, 30, 29, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    margin-top: 40px;
  }

  .assist-intro {
    display: flex;
    line-height: 35px;

    label {
      color: #999;
    }

    li {
      width: 50%;
    }

    b {
      color: #333;
      font-weight: normal;
    }
  }

  .colorRed {
    color: #ff5001;
    font-size: 24px;
  }

  .money {
  }

  .carousel {
    background: #fff;
    display: flex;
    padding: 20px;
    text-align: left;
    justify-content: space-between;
    height: 600px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(238, 238, 238, 1);

    .basic-Img {
      width: 50%;

      img {
        width: 100%;
        //   height: 100%;
      }
    }

    .basic-intro {
      width: 49.5%;
      padding: 20px;

      .title-bottom {
        display: flex;
        margin-top: 20px;
        color: #999;
        justify-content: space-between;

        > span {
          color: #E41E1D;
        }

        > div {
          display: flex;

          > span {
            display: flex;
            align-items: center;

            &:nth-of-type(1):before {
              content: '';
              background: url("../../static/img/03_jc.png") no-repeat center /100%;
              width: 18px;
              height: 18px;
            }

            &:nth-of-type(2) {
              margin: 0 20px;
            }

            &:nth-of-type(2):before {
              content: '';
              background: url("../../static/img/03_sc_d.png") no-repeat center /100%;
              width: 18px;
              height: 18px;
            }

            &:nth-of-type(3):before {
              content: '';
              background: url("../../static/img/03_sj.png") no-repeat center /100%;
              width: 18px;
              height: 18px;
            }
          }
        }
      }

      .money-ul {
        display: flex;
        align-items: center;
        padding: 20px 0;
        color: #333333;

        > li {
          &:nth-of-type(1) {
            flex: 0 0 15%;
            text-align: center;

            > p:first-child {
              font-size: 20px;
              font-weight: bold;
              color: #333333;
            }
          }

          &:nth-of-type(2) {
            flex: 0 0 45%;
            text-align: center;

            > p:first-child {
              font-size: 20px;
              font-weight: bold;
              color: #333333;
            }
          }

          &:nth-of-type(3) {
            text-align: center;
            flex: 0 0 16%;
          }

          &:nth-of-type(4) {
            text-align: right;
            flex: 0 0 30%;
            color: #E41E1D;
            text-decoration: underline;
          }
        }
      }

      > h2 {
        font-size: 26px;
        color: #333;
      }
    }
  }

  .small-imgs {
    display: flex;
    border: 1px solid #eee;
    height: 100px;
    //   align-items: center;
    overflow: hidden;

    img {
      vertical-align: middle;
      width: 100%;
      max-width: 150px;
    }

    div {
      overflow: hidden;
      margin: 10px;
      display: flex;
      align-items: center;
      background: #eee;
    }
  }

  .partstitle {
    font-size: 20px;
    font-weight: normal;
  }

  .intro-desc {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    font-size: 15px;
    line-height: 30px;
    color: #333;
  }

  .part-item {
    text-align: center;
    width: 140px;
    margin: 20px 0;
    color: #000;
  }

  .activePart {
    color: #E41E1D;
  }

  .main-intro {
    width: 1200px;
    margin: 20px auto;
    margin-top: 0;
  }

  .parts {
    background: #fff;
    text-align: left;

    .parts-set {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .label-container {
    dl {
      display: flex;
      align-items: center;

      > dt {
        color: #666666;
        font-size: 16px;
      }

      p {
        color: #333;
        font-size: 16px;
      }

      &:nth-of-type(1) {
        margin: 30px 0;

        dd {
          p {
            font-size: 26px;
            color: #E41E1D;
          }
        }
      }

      &:nth-of-type(2) {
        dd {
          ul {
            display: flex;

            li {
              padding: 9px 16px;
              border: 1px solid rgba(228, 30, 29, 1);
              border-radius: 4px;
              line-height: 12px;
              margin-right: 10px;
            }
          }
        }
      }

      &:nth-of-type(3) {
        margin-top: 30px;
        margin-bottom: 20px;
      }

      &:nth-of-type(4) {
        dd {
          display: flex;

          > p {
            &:last-child {
              color: #E41E1D;
              margin-left: 50px;
              display: flex;
              align-items: center;

              &:before {
                content: '';
                background: url("../../static/img/ckdt.png") no-repeat center/100%;
                width: 16px;
                height: 18px;
                margin-right: 12px;
              }
            }
          }
        }
      }
    }
  }

  .ad-title {
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    border-left: 3px solid rgba(228, 30, 29, 1);
    text-align: left;
    margin-bottom: 20px;

    span {
      margin-left: 9px;
    }
  }

  .body {
    display: flex;
    justify-content: space-between;
    margin-top: 39px;

    .body-left {
      //width: 918px;
      text-align: left;

      > dl {
        &:nth-of-type(1) {
          > dd {
            > div {
              display: flex;
              align-items: center;
              margin: 20px 0 30px 20px;

              img {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                margin-right: 20px;
              }

              span {
                line-height: 16px;
                font-size: 16px;
                font-weight: bold;
                color: #333333;
              }
            }

            > p {
              color: #666666;
              font-size: 14px;
              margin-left: 19px;
              margin-right: 31px;
              margin-bottom: 58px;
            }
          }
        }

        dd {
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(238, 238, 238, 1);
        }

        &:nth-of-type(2) {
          margin-top: 20px;

          > dd {
            border: 1px solid rgba(238, 238, 238, 1);
            padding: 20px;
          }

          .base-info {
            > li {
              label {
                background: rgba(246, 246, 246, 1);
                font-size: 16px;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
                height: 30px;
                line-height: 30px;
                width: 100%;
                display: block;
                padding-left: 4px;
                margin-bottom: 20px;
              }

              > ul {
                display: flex;
                flex-wrap: wrap;

                > li {
                  flex: 0 0 25%;
                  width: 25%;
                  line-height: 12px;
                  font-size: 16px;
                  color: #333333;

                  span {
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
      }

      .bg {
        height: 544px;
        background: url("../../static/img/tdbg.jpg") no-repeat center/100%;
      }

      .bottom-bg {
        height: 200px;
        background: url("../../static/img/zhuanpu_banner.jpg") no-repeat center/100%;
      }

      .shangpu {
        height: 325px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(238, 238, 238, 1);
        padding: 30px;

        > div {
          background: url("../../static/img/py_bg.jpg") no-repeat center/100%;
          height: 265px;
          display: flex;
          align-items: center;
          justify-content: center;

          .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 500px;
            height: 148px;
            background: rgba(255, 255, 255, 1);
            opacity: 0.89;
            border-radius: 10px;
            color: #222222;

            > div {
              width: 280px;
              height: 48px;
              background: rgba(228, 30, 29, 1);
              border: 1px solid rgba(238, 238, 238, 1);
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 19px;
              font-size: 20px;
              font-weight: 400;
              color: rgba(255, 255, 255, 1);
              margin-top: 32px;
            }
          }
        }
      }

      .tu {
        display: flex;
        justify-content: space-between;
        margin-top: 30px;

        > div {
          width: 450px;
          height: 350px;

          &:last-child {
            ul {
              border: 1px solid rgba(238, 238, 238, 1);
              background: rgba(255, 255, 255, 1);
              padding: 20px;
              font-size: 16px;
              color: #666;

              > li {
                border-bottom: 1px solid rgba(238, 238, 238, 1);

                > p {
                  line-height: 23px;

                  &:first-child {
                    margin-top: 10px;
                  }

                  &:last-child {
                    margin-bottom: 19px;
                  }

                  span {
                    color: #E41E1D;
                    margin-left: 2px;
                  }
                }

                &:last-child {
                  border: none;
                }
              }
            }
          }
        }
      }
    }

    .body-right {
      width: 265px;

      .picture-text {
        img {
          width: 100%;
          height: 150px;
        }

        p {
          height: 68px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(238, 238, 238, 1);
          display: flex;
          flex-direction: column;
          text-align: left;
          justify-content: center;

          > span {
            font-size: 16px;
            padding-left: 10px;

            &:first-child {
              color: #222222;
              line-height: 16px;
              margin-bottom: 10px;
            }
          }
        }
      }

      .my {
        height: 200px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(238, 238, 238, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 20px;

        > p {
          &:first-child {
            color: #222222;
            font-size: 16px;
          }

          &:nth-child(2) {
            margin-top: 12px;
            color: #999999;
            font-size: 14px;
          }
        }

        input {
          width: 222px;
          height: 36px;
          background: rgba(238, 238, 238, 1);
          outline: none;
          border: none;
          font-size: 12px;
          color: #999999;
          margin: 26px 0;
          padding: 10px;
        }

        span {
          position: relative;
          display: flex;

          &:after {
            content: '元/月';
            position: absolute;
            top: 35px;
            right: 10px;
            font-size: 14px;
            color: rgba(102, 102, 102, 1)
          }
        }

        > div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 160px;
          height: 32px;
          border: 1px solid rgba(228, 30, 29, 1);
          background: rgba(255, 255, 255, 1);
          font-size: 16px;
        }
      }

      .dongtai {
        width: 265px;
        height: 380px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(238, 238, 238, 1);
        margin-bottom: 20px;
        display: flex;
        padding: 20px;

        > div {
          &:nth-of-type(1) {
            li {
              display: flex;
              flex-direction: column;
              margin-bottom: 15px;

              span {
                width: 40px;
                height: 40px;
                background: rgba(221, 221, 221, 1);
                border-radius: 50%;
              }

              p {
                line-height: 11px;
                font-size: 12px;
                color: rgba(102, 102, 102, 1);
                margin-top: 5px;
              }
            }
          }
          &:nth-of-type(2){
            margin: 0 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            ul{
              li{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                span{
                  width:2px;
                  height:58px;
                  background:rgba(228,30,29,1);
                }
              }
            }
          }
          &:nth-of-type(3) {
            li {
              height: 55px;
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: center;
              margin-bottom: 15px;
              > p {
                &:first-child {
                  line-height:12px;
                  font-size:14px;
                  font-weight:400;
                  color:rgba(34,34,34,1);
                }

                &:last-child {
                  line-height:9px;
                  font-size:12px;
                  margin-top: 5px;
                  color:rgba(153,153,153,1);
                }
              }
            }
          }
        }
      }
    }
  }

  .request {
    width: 292px;
    height: 142px;
    background: url("../../static/img/msfk.png") no-repeat center /100%;
    position: fixed;
    right: 50px;
    bottom: 50px;
    cursor: pointer;
  }
</style>
